<!--
 * @Description: 新闻详情
 * @Author: seadon
 * @LastEditors: qiyu qiyu@byteluck.com
 * @Date: 2021-07-10 17:33:44
 * @LastEditTime: 2023-03-25 10:44:17
-->

<template>
	<div class="news-featured">
		<a-breadcrumb class="bread-crumbsto">
			<a-breadcrumb-item>
				<router-link :to="{ name: 'home' }">
					{{ $t('informationPortal.home', '首页') }}</router-link
				>
			</a-breadcrumb-item>
			<a-breadcrumb-item v-if="menuData[0]?.value !== 'carousel'">
				<router-link
					:to="{
						name: 'AttachmentCenter',
						query: { type: menuData[0]?.value },
					}"
					>{{ menuData[0]?.labelCenter }}</router-link
				>
			</a-breadcrumb-item>
			<a-breadcrumb-item style="font-weight: bold"
				>{{ menuData[0]?.labelCenter }}详情</a-breadcrumb-item
			>
		</a-breadcrumb>
		<div class="content-news" v-for="(item, index) in detailList" :key="index">
			<div class="extend-news">
				<h1>{{ item.title }}</h1>
			</div>
			<div class="releases-news">
				<div class="auther-releases">
					{{ $t('informationPortal.creator', '创建人') }}：{{
						item?.creator?.employee_name
					}}
				</div>
				<div class="number-time-releases">
					<figure>
						<i class="low-code iconliulan1"></i>
						<figcaption>{{ item.hits }}</figcaption>
					</figure>
					<span></span>
					<figure>
						<i class="low-code iconshijian"></i>
						<figcaption>
							{{ moment(item.pubdate).format('YYYY-MM-DD HH:mm:ss') }}
						</figcaption>
					</figure>
				</div>
			</div>

			<div class="list-news">
				<div v-html="formatRichText(item.content)"></div>
			</div>
			<div class="sources-news">{{ item.news_source }}</div>
			<div class="download-animation">
				<a-row :gutter="24">
					<a-col v-for="items in item.attachment" :key="items" :span="6">
						<div class="and-types">
							<div class="and-types-left">
								<img
									width="46"
									height="56"
									style="margin-right: 11px"
									:src="
										path.getFullPath(
											'/icon/' + fileTypeName(items.file_name) + '.svg'
										)
									"
								/>
								<span class="and-types-text">{{ items.file_name }}</span>
							</div>
							<i
								v-if="isSupportPreivew(items.file_name)"
								class="and-types-icon low-code iconliulan1 mr-16"
								@click.stop="previewHandle(items)"
							></i>
							<i
								class="and-types-icon low-code iconxiazai"
								@click.stop="downLoadHandle(items)"
							></i>
						</div>
					</a-col>
				</a-row>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import moment from 'moment'
import { apiInit } from '@/services'
import getMenuTitle from '../AttachmentListCrumbs'
import { client, path } from '@/utils'
import useDetails from '@/entry_desktop/views/Home/components/News/hooks/useDetails'
import './index.less'
export default {
	//启动函数
	setup() {
		let tabList: any = []
		const router = useRouter()
		const api = apiInit()
		const type = router.currentRoute.value.query.type //页面类型
		const id = router.currentRoute.value.query.id //请求参数id

		const menuData: any = ref({}) //面包屑数据
		const detailList: any = ref({}) //详情数据
		const { MenuTitle } = useDetails()
		const local: any = localStorage.getItem('locale')?.substr(0, 2)

		const encodingMicrodata = () => {
			const array: any = tabList.filter((item: any, index: number) => {
				return type === item.value
			})
			return array
		}
		const getTabList = async () => {
			tabList = await getMenuTitle()
		}
		//获得详情页数据
		const dataDismiss = () => {
			if (type === 'news') {
				return fetchNewsList(id)
			} else if (type === 'notifications') {
				return fetchNotificationsList(id)
			} else if (type === 'regulations') {
				return fetchRegulationsList(id)
			} else if (type === 'carousel') {
				return fetchCarouselList(id)
			}
		}

		//新闻详情
		const fetchNewsList = async (news_id: any) => {
			const { data, code } = await api.default.GetNewsPrivateV2POST({
				payload: { news_id },
			})
			if (code === '000000') {
				const NewsList: any = [data]
				return NewsList
			}
		}
		//公告详情
		const fetchNotificationsList = async (notice_id: any) => {
			const { data, code } = await api.default.GetNoticePrivateV2POST({
				payload: { notice_id },
			})
			if (code === '000000') {
				const NotificationsList: any = [data]
				return NotificationsList
			}
		}
		// 规章制度详情
		const fetchRegulationsList = async (rules_id: any) => {
			const { data, code } = await api.default.GetRegulationPrivateV2POST({
				payload: { rules_id },
			})
			if (code === '000000') {
				const RegulationsList: any = [data]
				return RegulationsList
			}
		}
		//轮播详情
		const fetchCarouselList = async (carousel_id: any) => {
			const { data, code } = await api.default.GetCarouselPrivateV2POST({
				payload: { carousel_id },
			})
			if (code === '000000') {
				const CarouselList: any = [data]
				return CarouselList
			}
		}

		// 下载
		const downLoadHandle = async (item: any) => {
			// window.open(
			// 	`//${window.location.host}/portal/api/v1/private/portal/file/download?fileId=${item.file_id}`,
			// 	'_self'
			// )
			client.openWindow(
				path.getFullPath(`/attachment/api/v1/private/download/${item.file_id}`),
				'_self'
			)
		}

		const previewHandle = async (item: any) => {
			window.open(item.view_path)
		}

		const fileTypeName = (fileName: string) => {
			return (
				fileName.toLowerCase() && fileName.slice(fileName.lastIndexOf('.') + 1)
			).toLowerCase()
		}

		const isSupportPreivew = (fileName: string) => {
			const supportPreviewFileType = [
				'png',
				'jpg',
				'jpeg',
				'gif',
				'doc',
				'docx',
				'xls',
				'xlsx',
				'txt',
				'ppt',
				'pptx',
				'pdf',
			]
			const extName = fileTypeName(fileName)

			return supportPreviewFileType.indexOf(extName) > -1
		}
		onMounted(async () => {
			await getTabList()
			menuData.value = encodingMicrodata()
			detailList.value = await dataDismiss()
		})
		const formatRichText = (val: string) => {
			const mark: string = client.isPc() ? 'desktop.html' : 'mobile.html'
			const res = val.replace(
				/..\/attachment/g,
				location.href.split(mark)[0] + 'attachment'
			)
			return res
		}

		return {
			encodingMicrodata,
			dataDismiss,
			menuData,
			detailList,
			moment,
			downLoadHandle,
			previewHandle,
			fileTypeName,
			isSupportPreivew,
			path,
			MenuTitle,
			local,
			formatRichText,
		}
	},
}
</script>
